<template>
	<div>
    <form>
        <input type="text" value="" v-model="name" placeholder="请输入用户名">
        <input type="text" value="" v-model="age" placeholder="请输入年龄">
        <input type="file" @change="getFile($event)" multiple="multiple">
        <button @click="submitForm($event)">提交</button>
    </form>

	</div>
</template>
<script>
// 组件内单独引入axios
import axios from "axios";
export default {
  name: "View1",
  data() {
    return {
      name: "",
      age: "",
      file: []
    };
  },
  methods: {
    //   该函数是获取上传的文件（多个文件）
    getFile(event) {
      //   获取文件信息赋值到data
      this.file = event.target.files;
    },
    // 上传文件
    submitForm(event) {
      // 阻止默认事件
      event.preventDefault();
      //   new 一个formdata对象
      let formData = new FormData();
      //   向formData插入数据(append数据)
      formData.append("name", this.name);
      formData.append("age", this.age);
      // 将多个文件分开插入formdata
      for (let item in this.file) {
        formData.append(`file`, this.file[item]);
      }
      //   设置请求头类型
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios
        .post("http://dsx2016.s1.natapp.cc/update", formData, config)
        .then(function(response) {
          if (response.status === 200) {
            console.log(response.data);
          }
        });
    }
  }
};
</script>
